import React from 'react';
import Link from 'umi/link';
import { connect } from 'dva';
import { Icon, Layout, Menu } from 'antd';

import StorageUtils from '@/utils/StorageUtils';
import styles from './SiderMenu.less';
import * as paths from '@/constants/Paths';
import { SIDER_MENU } from '@/constants/ModelNamespaces';

const { Sider } = Layout;
const SubMenu = Menu.SubMenu;

interface SiderMenuProps{
  updateSelectedKeys:(selectedKeys:Array<string>)=>void;
  updateOpenKeys:(openKeys:Array<string>)=>void;
  state:any;
  match:any;
  collapsed:boolean;
  session:any;
}

/**
 * 布局-侧边栏
 */
class SiderMenu extends React.Component<SiderMenuProps,any> {
  constructor(props:SiderMenuProps) {
    super(props);

    this.state = {
      session:{}
    };
  }

  componentDidMount() {
    const session = StorageUtils.getSessionItem('session')||{};
    // const session = this.props.sessionState.session;
    this.setState({ session:session });
  }
  //保存展开的菜单项key
  onSelect = params => {
    const { selectedKeys } = params;
    // console.log('selectedKeys', selectedKeys);
    //把状态存在store中
    this.props.updateSelectedKeys(selectedKeys);
  }

  // function(openKeys: string[])
  //保存展开的子菜单组keys
  onOpenChange = openKeys => {
    // console.log('openKeys', openKeys);
    this.props.updateOpenKeys(openKeys);
  }

  render() {
    const { state } = this.props;
    const match = this.props.match;
    // console.log('菜单的state', state);
    
    return (
      <Sider
        style={{ overflow: 'auto', height: '100vh', left: 0 }}
        trigger={null}
        collapsible={true}
        collapsed={this.props.collapsed}
      >
        <div
          className={styles['header-div-logo']}
          key="logo"
        >
          <Link to="/">
            {/* <img src={logo} alt="logo" /> */}
            <span className={styles['header-div-logo-font']}>XXX后台管理</span>
          </Link>
        </div>
        <Menu
          mode="inline"
          theme="dark"
          //配合Slider的Collapsed
          inlineCollapsed={this.props.collapsed}
          // 初始展开的 SubMenu 菜单项 key 数组
          defaultOpenKeys={state.defaultOpenKeys}
          //当前选中的菜单项
          selectedKeys={state.selectedKeys}
          //当前展开的子菜单组
          openKeys={this.props.collapsed ? [] : state.openKeys}
          //保存展开的菜单项key
          onSelect={this.onSelect}
          //保存展开的子菜单组keys
          onOpenChange={this.onOpenChange}
          style={{ 'fontSize': '14px' }}
        >
          {this.state.session.authority === 'root' ?
            <SubMenu key="sys" title={<span><Icon type="setting" /><span>系统模块</span></span>}>
              <Menu.Item key="gm_manage">
                <Link to={`/${paths.GM_MANAGE}`}>用户管理</Link>
              </Menu.Item>
            </SubMenu>
          : null }
          <SubMenu key={`${paths.STORE}`} title={<span><Icon type="shop" /><span>{`${paths.pathNamesMap[paths.STORE]}`}</span></span>} >
            {this.state.session.authority === 'root' ?
              <Menu.Item key={`${paths.GOODS_MGMS}`} >
                <Link to={`${match.path}/${paths.GOODS_MGMS}`} ><Icon type="shopping-cart" /><span>{`${paths.pathNamesMap[paths.GOODS_MGMS]}`}</span></Link>
              </Menu.Item>
            : null }
            <SubMenu key={`${paths.PUTAWAY}`} title={<span><Icon type="appstore" /><span>{`${paths.pathNamesMap[paths.PUTAWAY]}`}</span></span>}>
              <Menu.Item key={`${paths.PUTAWAY_SILVER}`} >
                <Link to={`${match.path}/${paths.PUTAWAY_SILVER}`} ><Icon type="appstore" /><span>{`${paths.pathNamesMap[paths.PUTAWAY_SILVER]}`}</span></Link>
              </Menu.Item>
              <Menu.Item key={`${paths.PUTAWAY_GOLD}`} >
                <Link to={`${match.path}/${paths.PUTAWAY_GOLD}`} ><Icon type="appstore" /><span>{`${paths.pathNamesMap[paths.PUTAWAY_GOLD]}`}</span></Link>
              </Menu.Item>
              <Menu.Item key={`${paths.PUTAWAY_CARD}`} >
                <Link to={`${match.path}/${paths.PUTAWAY_CARD}`} ><Icon type="appstore" /><span>{`${paths.pathNamesMap[paths.PUTAWAY_CARD]}`}</span></Link>
              </Menu.Item>
            </SubMenu>
            <Menu.Item key={`${paths.PURCHASE_HISTORY}`} >
              <Link to={`${match.path}/${paths.PURCHASE_HISTORY}`} ><Icon type="profile" /><span>{`${paths.pathNamesMap[paths.PURCHASE_HISTORY]}`}</span></Link>
            </Menu.Item>
          </SubMenu>
          <SubMenu key="business" title={<span><Icon type="appstore" /><span>业务模块</span></span>}>
            <Menu.Item key={`${paths.GOODS_PUBLISH}`}>
              <Link to={`${match.path}/${paths.GOODS_PUBLISH}`}>{`${paths.pathNamesMap[paths.GOODS_PUBLISH]}`}</Link>
            </Menu.Item>
            {/* <Menu.Item key={`${paths.THEME_MANAGE}`}>
              <Link to={`${match.path}/${paths.THEME_MANAGE}`}>{`${paths.pathNamesMap[paths.THEME_MANAGE]}`}</Link>
            </Menu.Item> */}
            <Menu.Item key="test_chart">
              <Link to={`/test_chart`}>G2图表</Link>
            </Menu.Item>
            <Menu.Item key="test_chart">
              <Link to={`/test_bizcharts`}>BizCharts图表</Link>
            </Menu.Item>
            {/* 
            <Menu.Item key="item23">
              <Link to={`${match.path}/${paths.ACCOUNT_HISTORY}`}>账单查询</Link>
            </Menu.Item>
            <Menu.Item key="item24">
              <Link to={`${match.path}/${paths.NOTICE_MAN}`}>系统公告</Link>
            </Menu.Item> */}
          </SubMenu>
        </Menu>
      </Sider>
    );
  }
}

//########################## UI组件结束,容器组件开始 ####################
const namespace = SIDER_MENU;

const mapStateToProps = state => {
  return {
    state: state[namespace],
    // sessionState:state.SessionReducer,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    updateSelectedKeys: selectedKeys => {
      dispatch({ type: `${namespace}/updateSelectedKeys`, payload: { selectedKeys: selectedKeys } });
    },
    updateOpenKeys: openKeys => {
      dispatch({ type: `${namespace}/updateOpenKeys`, payload: { openKeys: openKeys } });
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(SiderMenu);
